<!-- 体测项目进度 -->
<template>
  <div class="app-container">
    <el-form :model="queryParams" :rules="rules" ref="queryRef" :inline="true" label-width="68px">
	  
	  <el-form-item label="学校" prop="xxid">
	    <el-select v-model="queryParams.xxid" @change="schoolChange" placeholder="请选择学校" :disabled="isXxidFlag">
	      <el-option
	        v-for="d in dept_self"
	        :key="d.value"
	        :label="d.label"
	        :value="d.value"
	      />
	    </el-select>
	  </el-form-item>	
	  <el-form-item label="评分标准" prop="tcxmfl" label-width="100">
	  	<el-select filterable v-model="queryParams.tcxmfl" @change="pfbzChange" placeholder="选择评分标准" clearable>
	  		<el-option value="" label="全部" ></el-option>
	  		<el-option
	  		  v-for="d in tctypeList"
	  		  :key="d.id"
	  		  :label="d.xmflTitle"
	  		  :value="d.id"
	  		/>
	  	</el-select>
	  </el-form-item>
	</el-form>
	
	<el-row>
	  <!-- <right-toolbar :search="false" @queryTable="handleQuery"></right-toolbar> -->
	  <right-toolbar :myButtonShow="true" :myButtonText="'图表'" @myButtonClick="myButtonClick" :search="false" @queryTable="handleQuery" style="width: 200px;"></right-toolbar>
	</el-row>
	
<!-- 	<el-row style="justify-content: center;">
		<div id="main" style="width: 90%;min-height:500px;" v-show="showEcharts"></div>
	</el-row>
		<br>
		 -->
	<el-row style="justify-content: center;">
		<el-text class="mx-1" size="large" style="font-weight: bold;margin-bottom: 10px;">{{getDeptName(queryParams.xxid)}} - 班级体测项目进度</el-text>
	</el-row>
		<br>
	<el-table  :show-overflow-tooltip="true" v-loading="loading" :data="tcDataList">
	  <!-- <el-table-column type="selection" width="55" align="center" /> -->
	  <el-table-column type="index" label="序号" width="55" />
	  <!-- <el-table-column label="设备ID" align="center" prop="id" /> -->
	  <!-- :show-overflow-tooltip="true" -->
	  <!-- <el-table-column :show-overflow-tooltip="true" label="客户端ID" align="center" prop="sbClientid" /> -->
	  <el-table-column label="班级" align="center" prop="bj_name" width="130">
		<template #default="scope">
			{{scope.row.bj_name}}
		</template>
	  </el-table-column>
	  <el-table-column label="年级" align="center" prop="sj_njid" width="115">
		<template #default="scope">
			<!-- {{scope.row.sj_njid}} -->
			<dict-tag :options="tc_nj" :value="scope.row.sj_njid" />
		</template>
	  </el-table-column>
	  <el-table-column label="人数" align="center" prop="renshu" width="130">
		<template #default="scope">
			<!-- 
			男:{{scope.row.nan==null?'0':scope.row.nan}}
			女:{{scope.row.nv==null?'0':scope.row.nv}}
			 -->
			{{scope.row.bjrs==null?'0':scope.row.bjrs}}
		</template>
	  </el-table-column>
	  <template   v-for="c in projectList2"
	  			  :key="c.id"
	  			  :label="c.xmMc"
	  			  :value="c.id">
		  <el-table-column :label="c.xmMc" align="center" :prop="'pro'+c.id"  min-width="150">
				<template #default="scope">
					<!-- {{parseTime(scope.row.sj_tcsj,'{y}-{m}-{d} {h}:{i}')}} -->
					<!-- <el-tag type="info" v-if="scope.row['pro'+c.id]==0 || scope.row['pro'+c.id]==null">已测({{}})人</el-tag> -->
					<el-tag type="info" v-if="scope.row['pro'+c.id]==0 || scope.row['pro'+c.id]==null">未测试</el-tag>
					<el-tag v-if="scope.row['pro'+c.id]!=0 && scope.row['pro'+c.id]!=null">已测 {{scope.row['pro'+c.id]==null?'0':scope.row['pro'+c.id]}} 人
					({{parseFloat((scope.row['pro'+c.id]/scope.row.bjrs)).toFixed(2)*100}}%)
					</el-tag>
				</template>
		  </el-table-column>
	  </template>
	  
<!-- 	  <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="300">
	    <template #default="scope">
	    </template>
	  </el-table-column> -->
	</el-table>

	
	
	
	
	
  </div>
	
</template>

<script setup name="Bjxmjd">
import { checkPermi, checkRole } from "@/utils/permission"; // 1. 导入权限判断函数
import * as echarts from 'echarts';
import useUserStore from "@/store/modules/user";
import { listDept } from "@/api/system/dept";
import { getStudentNumber} from "@/api/tc/student";
import { listClass} from "@/api/tc/class";
import { listTctype,getTctype} from "@/api/tc/tctype";
import { listProject} from "@/api/tc/project";
import { jgfx,getTcDataList,getTcJD_sList,getTcJD_cList} from "@/api/tc/datafx";
const { proxy } = getCurrentInstance();
const { tc_nj } = proxy.useDict('tc_nj');
const userStore = useUserStore();

const userinfo = reactive({
  token: userStore.token,
  id: userStore.id,
  name: userStore.name,
  avatar: userStore.avatar,
  roles: userStore.roles,
  permissions: userStore.permissions
});	
const data = reactive({
  form: {},
  queryParams: {
    xxid: null,
    bjid: null,
    njid: null,
	tcxmid:'',
	tcxmfl:null
  },
  rules: {
	  xxid: [
	    { required: true, message: "学校不能为空", trigger: "change" }
	  ],
	  bjid: [
	    { required: true, message: "班级不能为空", trigger: "change" }
	  ]
	  
  }
});

const { queryParams, form, rules } = toRefs(data);
const isXxidFlag=ref(false);
const dept_self = ref([]);
const classList = ref([]);
const classList2 = ref([]);
const projectList = ref([]);
const projectList2 = ref([]);
const tctypeList = ref([]);
const tcDataList = ref([]);
const tcdata=ref({});
const countSum=ref(0);
const loading = ref(true);
const tmpProPar={pageNum: 1,pageSize: 999,xmStatus:'1'};
const tmpProTypePar={pageNum: 1,pageSize: 999,xmflStatus:'1'};
var myChart;
const myChartOption=ref(null);
const echartData=ref(null);
const showEcharts = ref(true);

onMounted(() => {
		  getDeptInfo();
		  // myChart = echarts.init(document.getElementById('main'));
 })
function getDeptInfo(){
		// console.log(userStore.user)
		if(checkRole(['admin','common'])){
			listDept({}).then(response => {
			  	response.data.forEach(function (element) {
			  	  // 遍历数组，对每个元素进行操作
				   if(element.xxlevel !=null && element.xxlevel != ''){
						dept_self.value.push({"value":element.deptId,"label":element.deptName});
				   }
			  	});
				queryParams.value.xxid=dept_self.value[0].value;
				getProjectList();
				// getClassList(null);
				// schoolChange(queryParams.value.xxid);
			});
			isXxidFlag.value=false;
		}else{
			dept_self.value.push({"value":userStore.user.deptId,"label":userStore.user.dept.deptName});
			queryParams.value.xxid=dept_self.value[0].value;
			isXxidFlag.value=true;
			getProjectList()
			// getClassList(queryParams.value.xxid);
			// schoolChange(queryParams.value.xxid);
		}
}

// function getClassList(bjid){
// 	// if(checkRole(['admin','common'])){
// 	// 	bjid=null;;
// 	// }else{
// 	// 	bjid=userStore.user.deptId;
// 	// }
// 	listClass({"pageNum": 1,"pageSize": 500,"bjXxid" : bjid}).then(response => {
// 		response.rows.forEach(function (el) {
// 		  // 遍历数组，对每个元素进行操作
// 			classList.value.push({"value":el.id,"label":el.bjName,"xxid":el.bjXxid,"njid":el.bjNj});
// 		});
// 		if(classList.value.length > 0){
// 			queryParams.value.bjid=classList.value[0].value;
// 			queryParams.value.njid=classList.value[0].njid;
// 			schoolChange(classList.value[0].xxid)
// 			// schoolChangeAU(classList.value[0].xxid)
// 		}
// 		// getList();
// 	});
// }


function getStudentNum(){
	getStudentNumber({"school": 200,"classj": 5}).then(response => {
		console.log(response)
	});
}

function getTcData(){
	let par={"xxid": queryParams.value.xxid,"tcxmfl":queryParams.value.tcxmfl};
	// console.log(par);
	if(queryParams.value.xxid=='' || queryParams.value.xxid==null){
		loading.value = false;
		return;
	}
	loading.value = true;
	getTcJD_cList(par).then(response => {
		// proxy.$modal.msgSuccess("加载数据成功!");
		// console.log(response)
		tcDataList.value=response.data
		loading.value = false;
		loadEchartsData();
	}).catch(()=>{
		loading.value = false;
	});
}

/** 查询体测项目列表 */
function getProjectList() {
  // loading.value = true;
  listProject(tmpProPar).then(response => {
    projectList.value = response.rows;
    projectList2.value = response.rows;
	// projectList.value.push({"xmMc":"AAAA","id":999});
	// console.log(projectList.value)
	gettctypeList();
  });
}
function gettctypeList(){
  listTctype(tmpProTypePar).then(response => {
	  // console.log(response)
    tctypeList.value = response.rows;
	
	handleQuery();
	// tctypeProList(tctypeList.value[0].id)
  });
}
/* function tctypeProList(id){
  getTctype(id).then(response => {
	// console.log(response.data.tcProjectTpList)
  });

	
} */
function showProject(e){
	if(e==null || e==''){
	  projectList2.value=projectList.value;
	}else{
	  projectList2.value=[];
	 tctypeList.value.forEach((item)=>{
		 if(item.id==e){
			// console.log(item.tcProjectTpList)
			item.tcProjectTpList.forEach((item2)=>{
				let a=projectList.value.filter(function(currentValue,index,arr){
					return currentValue.id == item2.projectid ;
				});
				projectList2.value.push(a[0])
				// console.log(item2)
			})
		 }
	 })
	}
}
 function pfbzChange(e){
	showProject(e);
	handleQuery();
 }
function schoolChange(e){
	handleQuery();
}	

 function handleQuery(){
	getTcData();
 }
 const getDeptName=(id)=>{
 	for(let d of dept_self.value){
 		 if(id==d.value){
 			 return d.label;
 		 }
 	}
 }
 
 
 /*-----图----*/
 function myButtonClick(){
 	showEcharts.value=showEcharts.value?false:true;
 }
 
 function loadEchartsData(){
 	console.log("loadEchartsData")
 	// console.log(myChartOption.value.series[0].data)
 	myChartOption.value.yAxis.data=[]
 	myChartOption.value.series[0].data=[]
 	// myChartOption.value.series[1].data=[]
 	
 	// console.log(tcDataList.value)
 	// console.log(projectList2.value)
	let max=0;
	
	tcDataList.value.forEach((item=>{
		max+=item.bjrs==null?0:parseInt(item.bjrs);
	}))
 	projectList2.value.forEach((item=>{
 		myChartOption.value.yAxis.data.push(item.xmMc);
		let count=0;
		tcDataList.value.forEach((item2=>{
			if(item2['pro'+item.id]!=null && item2['pro'+item.id]!=0){
				count+=parseInt(item2['pro'+item.id]);
			}
		}))
 		myChartOption.value.series[0].data.push(count);
 		// myChartOption.value.series[1].data.push(count_nv);
 		// myChartOption.value.series[1].data.push(15);
 	}))
 	myChartOption.value.xAxis.max=max;
	myChartOption.value.title.text=getDeptName(queryParams.value.xxid)+' 学生 - 体测项目进度';
 	myChart.setOption(myChartOption.value);
 }
 

 const seriesLabel = {
   show: true,
   position: 'right',
   // formatter: '{a}-{b}-{c}'
   formatter: function(v){
 	  let count=parseInt(myChartOption.value.xAxis.max);
 	  let c=v.data;
 	  let p=0;
	  // console.log(c/count)
 	  if(c!=0 && count!=0){
		  p=(parseFloat(c/count)*100).toFixed(2);
 	  }
 	  return c+'人 ('+(p)+'%)'
   }
       
 };
 myChartOption.value = {
   title: {
     text: '总体学生 - 体测项目进度'
   },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       type: 'shadow'
     },
 	valueFormatter: (value) => value+'人',
 	// formatter: '{b0}: {c0}<br />{b1}: {c1}'
     // formatter: '{a} <br/>{b} : {c} ({d}%)'
   },
   legend: {
     data: ['人数']
   },
   grid: {
     left: 100
   },
   toolbox: {
     show: true,
     feature: {
       // saveAsImage: {}
     }
   },
   xAxis: {
     type: 'value',
     name: '总人数',
     axisLabel: {
       formatter: '{value}'
     }
   },
   yAxis: {
     type: 'category',
     // inverse: true,
     data: ['test1', 'test2', 'test3'],
     axisLabel: {
       formatter: function (value) {
         // return '{' + value + '| }\n{value|' + value + '}';
         return  value;
       },
 	  // richText: true,
       margin: 20,
       rich: {
         value: {
           lineHeight: 30,
           align: 'center'
         },
       }
     }
   },
   series: [
     {
       name: '人数',
       type: 'bar',
       data: [165, 170, 30],
       label: seriesLabel,
 	  itemStyle: {
 	  	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 	  	  { offset: 0, color: '#83bff6' },
 	  	  { offset: 0.5, color: '#188df0' },
 	  	  { offset: 1, color: '#188df0' }
 	  	])
 	  },
 	  emphasis: {
 	  	itemStyle: {
 	  	  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 	  		{ offset: 0, color: '#2378f7' },
 	  		{ offset: 0.7, color: '#2378f7' },
 	  		{ offset: 1, color: '#83bff6' }
 	  	  ])
 	  	}
 	  },
     },
   ]
 };
 

</script>

<style>
</style>